<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <style>
        #page-wrapper h1 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }
        #page-wrapper h1 em{ font-size: 14px; color: #999; margin-left: 50px; font-weight: normal; font-style: normal;}
        #fileValue {
            opacity: 0;
            width: 0px;
            height: 0px;
            font-size: 0px;
        }
        #file {
            display: inline-block;
        }
        #fileValue{ width: 0; height: 0; opacity: 0; font-size: 0;}
        #myTable{ font-size: 14px;}
        .pro-box{ position: relative;}
        .pro-type-tit{ display: inline-block; width: 22px; line-height: 22px; border-radius: 50%; margin-right: 10px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .remove-btn{ position: absolute; top: 0; left: 50%; z-index: 300; width: 30px; line-height: 30px; border-radius: 50%; margin-right: 12px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .add-btn{ cursor: pointer;}
        .add-btn b{ display: inline-block; width: 30px; line-height: 30px; border-radius: 50%; margin-right: 12px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .choose-btn{ display: inline-block; padding: 0 12px; line-height: 34px; background-color: #D7D7D7; cursor: pointer; border-radius: 5px; text-align: center; font-size: 14px;}
    </style>
</head>
<body>

<div id="page-wrapper">
    <div class="panel panel-f5">
        <div class="panel-body row">
            <h1>● 基础信息</h1>
            <form id="Form" class="form-horizontal" method="post">
                <input type="hidden" id="_ctx" value="${basePath}"/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;类型：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="form-control" type="text" v-model="agentProtocolDto.systemName" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;协议名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.contractName" maxlength="50" v-model="agentProtocolDto.contractName" placeholder="最多输入50字" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">协议签约价：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="agentProtocolDto.price" maxlength="10" min="0.01" v-model="agentProtocolDto.price" readonly> 元
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">&nbsp;<font color="red">*</font>&nbsp;协议封面：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="obj-input" name="agentProtocolDto.cover" type="text">
                        <img v-if="agentProtocolDto.cover" class="obj-img" :src="agentProtocolDto.cover" width="100" height="100">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;选择产品：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="form-control" type="text" v-model="curProName" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;协议开放体系：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="form-control" type="text" v-model="tipOpenName" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;是否可销售汽摩券：</span>
                    <div class="col-sm-9 col-xs-8 sale-type">
                        <label><input type="radio" name="agentProtocolDto.type" value="1" :checked="agentProtocolDto.type==2 ? '' : 'checked'" disabled> 是</label>
                        <label><input type="radio" name="agentProtocolDto.type" value="2" :checked="agentProtocolDto.type==2 ? 'checked' : ''" disabled> 否</label>
                    </div>
                </div>

                <h1>● 详细描述</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">产品介绍：</span>
                    <div class="col-sm-9 col-xs-8 add-box image-text">
                        <div class="text-box" v-for="(item,index) in dataObj.agentProtocolImageTextDtoList">
                            <div v-if="item.type==1">
                                <textarea data-id="0" :name="'agentProtocolImageTextDtoList['+index+'].path'" maxlength="200" rows="3"
                                          cols="50" class="form-control" placeholder="最多输入200字" v-text="item.path" disabled></textarea>
                            </div>
                            <div v-if="item.type==2" class="upload-box">
                                <input class="obj-input" :name="'agentProtocolImageTextDtoList['+index+'].path'" :value="item.path" type="hidden">
                                <img class="obj-img" :src="item.path">
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font
                            color="red">*</font>&nbsp;协议名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.contractName" maxlength="50"
                               placeholder="最多输入50字" v-model="agentProtocolDto.contractName" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                            color="red">*</font>&nbsp;上传协议：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" id="fileText" class="form-control" size="50" :value="agentProtocolDto.contractUrl" readonly style="agentProtocolDto.contractUrl ? '' : 'display: none'" />
                        <input type="text" id="fileValue" name="agentProtocolDto.contractUrl">
                    </div>
                </div>
                <hr/>
                <div class="form-group">
					<span class="control-label col-sm-2 col-xs-4 detail-span"><span
                            class="text-red"></span> 备注：</span>
                    <div class="col-sm-10 col-xs-8 add-box">
                        <div class="text-box">
                            <textarea data-id="0" name='agentProtocolDto.remark' id="remark" v-text="agentProtocolDto.remark"
                                      class="form-control" maxlength="1000" placeholder="最多输入1000字" disabled></textarea>
                        </div>
                    </div>
                </div>

                <h1>● 签约协议额外赠送</h1>
                <div class="pro-box" v-for="(item, index) in dataObj.agentProductProjectDtoList">
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><b class="pro-type-tit" v-html="index+1"></b>类型：</span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" :name="'agentProductProjectDtoList['+index+'].projectId'" v-model="item.projectId" disabled>
                                <option value="" selected>无</option>
                                <option v-for="item in proType" :value="item.id" v-text="item.name"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;数量：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProductProjectDtoList['+index+'].containNum'" v-model="item.containNum" readonly>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==10">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;规格：</span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" :name="'agentProductProjectDtoList['+index+'].specId'" v-model="item.specId" disabled>
                                <option value="" selected>请选择规格</option>
                                <option v-for="item in proSpec" :value="item.motorcycleId" v-text="item.motorcycleName"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==11">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;规格：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProductProjectDtoList['+index+'].price'" v-model="item.price" readonly>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==10 || item.projectId==9 || item.projectId==11">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;有效期设置：</span>
                        <div class="col-sm-9 col-xs-8">
                            自购买日起 <input type="text" class="form-control" :name="'agentProductProjectDtoList['+index+'].intervalDays'" v-model="item.intervalDays" placeholder="留空为立即生效" readonly> 天生效，
                            有效期 <input type="text" class="form-control" :name="'agentProductProjectDtoList['+index+'].validTime'" v-model="item.validTime" readonly> 天
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"></span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" :name="'agentProductProjectDtoList['+index+'].type'" v-model="item.type" disabled>
                                <option value="0">固定项</option>
                                <option value="1">单选项</option>
                            </select>
                        </div>
                    </div>
                </div>

                <h1>● 返现设置<em>本项设置签约该协议后是否给予返现，没有返现请不填</em></h1>
                <div class="pro-box" v-for="(item, index) in dataObj.agentProtocolYieldRatioDtoList">
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><b class="pro-type-tit" v-text="index+1"></b>返现时间：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProtocolYieldRatioDtoList['+index+'].cashbackTime'" v-model="item.cashbackTime" readonly> 天
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span">返现比：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProtocolYieldRatioDtoList['+index+'].cashbackRatio'" v-model="item.cashbackRatio" readonly> %
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span">设置提现期限：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProtocolYieldRatioDtoList['+index+'].cashbackWithdrawal'" v-model="item.cashbackWithdrawal" readonly> 天
                        </div>
                    </div>
                </div>

                <h1>● 首次及销售分佣设置</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">首次分佣设置：</span>
                    <div class="col-sm-9 col-xs-8">
                        <div v-for="(item,index) in dataObj.agentProtocolCommissionDtoList" class="firstCent-li" v-if="item.type==1">
                            <span class="tit">{{item.systemName}}：</span>
                            <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].systemId'" v-model="item.systemId">
                            <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].type'" value="1">
                            <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].mode'" value="1">
                            佣金：<input class="form-control" type="text" :name="'agentProtocolCommissionDtoList['+index+'].value'" v-model="item.value" readonly/>
                            <select class="form-control" :name="'agentProtocolCommissionDtoList['+index+'].mode'" v-model="item.mode" disabled>
                                <option value="1">%</option>
                                <option value="2">元</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"><font color="red">*</font>&nbsp;销售分佣设置：</span>
                    <div class="col-sm-9 col-xs-8">
                        <div class="choose-cent-box">
                            <input type="radio" name="" value="0" v-model="centType" disabled> 无
                        </div>
                        <div class="choose-cent-box">
                            <input type="radio" name="" value="1" v-model="centType" disabled> 固定模式
                            <div v-if="centType==1 && item.type==2 && index>(num-1)" v-for="(item,index) in dataObj.agentProtocolCommissionDtoList" class="firstCent-li">
                                <span class="tit">{{item.systemName}}：</span>
                                <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].systemId'" v-model="item.systemId">
                                <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].type'" value="1">
                                <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].mode'" value="1">
                                佣金：<input class="form-control" type="text" :name="'agentProtocolCommissionDtoList['+index+'].value'" v-model="item.value" readonly/>
                                <select class="form-control" :name="'agentProtocolCommissionDtoList['+index+'].mode'" v-model="item.mode" disabled>
                                    <option value="1">%</option>
                                    <option value="2">元</option>
                                </select>
                            </div>
                        </div>
                        <div class="choose-cent-box">
                            <div class="cent-tit">
                                <input type="radio" name="" value="2" v-model="centType" disabled> 升级模式
                            </div>
                            <div class="cent-ul" v-for="(item,index) in dataObj.agentProtocolCommissionDtoList" v-if="item.promoteId && item.pattern==2">
                                <div class="cent-li">
                                    代理商累计销售额在：
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.promoteType'" v-model="index">
                                    <input class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.minSales'" v-model="item.lowMoney" readonly> 元 ~
                                    <input class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.maxSales'" v-model="item.highMoney" readonly> 元
                                </div>

                                <div class="firstCent-li">
                                    <span class="tit">{{item.systemName}}：</span>
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+index+'].systemId'" v-model="item.systemId">
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+index+'].type'" value="1">
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+index+'].mode'" value="2">
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+index+'].promoteType'" v-model="index">
                                    佣金：<input class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+index+'].value'" v-model="item.value" readonly/>
                                    <select class="form-control" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+index+'].mode'" v-model="item.mode" disabled>
                                        <option value="1">%</option>
                                        <option value="2">元</option>
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


                <h1>● 分享设置</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">分享标签图：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="obj-input" name="agentProtocolDto.sharePhoto" type="text">
                        <img v-if="agentProtocolDto.sharePhoto" class="obj-img" :src="agentProtocolDto.sharePhoto" width="100" height="100">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">分享标题：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.shareTitle" maxlength="50" v-model="agentProtocolDto.shareTitle" readonly
                               placeholder="请用简洁的文字描述标题">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">标签内容：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.shareContent" maxlength="10" placeholder="请用简洁语言描述标签分享的内容" v-model="agentProtocolDto.shareContent" readonly>
                    </div>
                </div>


                <hr>
                <div class="form-group">
                    <span class="control-label col-sm-4 col-xs-4"></span>
                    <div class="col-sm-8 col-xs-8">
                        <button type="button" class="btn btn-info" @click="goBack"><i class="fa fa-close"></i>返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
    <script>

        var vue = new Vue({
            el: "#page-wrapper",
            data: {
                num: 0,//首次分佣设置 体系数量
                layType: 1, //1类型 2协议开放体系 3首次分佣设置 4销售分佣设置-固定模式 5销售分佣设置-升级模式
                proIndex: 1, //产品类型数量
                backIndex: 1, //返现类型数量
                centUl: 1, //升级模式 - 代理商累计销售额
                proType: [],
                proSpec: [],
                //基本信息
                agentProtocolDto: {},
                openIdArr: [],
                dataObj: {
                    //协议开放体系
                    curOpenId: [],
                    //产品内容
                    agentProductProjectDtoList: [
                        {
                            projectId: "",
                            containNum: "",
                            specId: "",
                            intervalDays: "",
                            validTime: "",
                            type: 0
                        }
                    ],
                    //图文
                    agentProtocolImageTextDtoList: [
                        {
                            path: "",
                            sort: 1,
                            type: 1
                        }
                    ],
                    //返现
                    agentProtocolYieldRatioDtoList: [
                        {
                            cashbackTime: "",
                            cashbackRatio: "",
                            cashbackWithdrawal: ""
                        }
                    ],
                    //分佣
                    agentProtocolCommissionDtoList: [
//                        {
//                            name: '一区总代',
//                            type: 1, //1首次 2销售
//                            systemId: "",
//                            mode: 1, //1% 2元
//                            value: ""
//                        }
                    ]

                },
                //升级模式
                centIndex: 0,
                promoteList: [
                    {
                        saleDto: {
                            lowMoney: "",
                            highMoney: ""
                        },
                        centList: [],
                        centId: [],
                        centName: [],
                        oldIdArr: []
                    },
                    {
                        saleDto: {
                            lowMoney: "",
                            highMoney: ""
                        },
                        centList: [],
                        centId: [],
                        centName: [],
                        oldIdArr: []
                    }
                ],

                //选择类型
                tipFlag: false,
                typeId: "",
                typeName: "",
                tipOpenFlag: false, //协议开放体系
                tipOpenId: [],
                tipOpenName: [],
                typeArr: [],
                //产品类型
                proFlag: false,
                curProId: [],
                curProName: [],
                //分佣体系
                centType: 0,
                centId: [
                    [], [], []
                ],
                firstCent: [],
                fixedCent: [],
                upgradeCent: []

            },
            created: function () {
                var _this = this;
                //如果是编辑页面 执行数据获取
                var cur = window.location.href.split("=");
                var id = cur[cur.length-1];
                if (id) {
                    $.ajax({
                        url: '${basePath}/admin/agent/protocol/getAgentProtocolInfo',
                        type: 'GET',
                        dataType: 'json',
                        data: {
                            id: id
                        },
                        success: function (data) {
                            _this.dataObj = data.result;
                            _this.agentProtocolDto = data.result.agentProtocolDto;
                            var curProArr = data.result.agentProtocolProductDtoList;
                            for(var i=0,len=curProArr.length;i<len;i++){
                                _this.curProName.push(curProArr[i].productName)
                            }
                            var curSystemArr = data.result.agentProtocolSystemDtoList;
                            for(var i=0,len=curSystemArr.length;i<len;i++){
                                _this.tipOpenName.push(curSystemArr[i].systemName)
                            }

                            //模式 centType
                            var comDtoList = data.result.agentProtocolCommissionDtoList;
                            for(var i=0,len=comDtoList.length;i<len;i++){
                                if(comDtoList[i].pattern==1){
                                    _this.centType = 1
                                }
                                else if(comDtoList[i].pattern==2){
                                    _this.centType = 2
                                }
                                else{
                                    _this.centType = 0
                                }
                            }

                        },
                        error: function () {
                            console.log("error")
                        }
                    })
                }
                //获取类型
                $.ajax({
                    url: '${basePath}/admin/agent/product/typeList',
                    type: 'GET',
                    dataType: 'json',
                    data: {},
                    success: function (data) {
                        _this.proType = data.result.baseProductList;
                        _this.proSpec = data.result.motorcycleList;
                    },
                    error: function () {
                        console.log("error")
                    }
                })
                //获取体系
                $.ajax({
                    url: '${basePath}/admin/agent/system/queryAgentSystem',
                    type: 'GET',
                    dataType: 'json',
                    data: {},
                    success: function (data) {
                        console.log(data)
                        _this.typeArr = data;
                    },
                    error: function () {
                        console.log("error")
                    }
                })
            },
            methods: {
                goBack: function(){
                    window.location.href = "${basePath}/admin/agent/protocol";
                }
            }
        })
    </script>
</body>
</html>